<template>
  <div class="search">
    <div class="banxin">
      <div class="head">
        <div class="bread">
          <div class="all">全部结果</div>
          <i class="iconfont icon-arrow-right"></i>
          <div class="keyword">{{ query.keyword }}</div>
          <i v-if="query.keyword" class="iconfont icon-arrow-right"></i>
        </div>
        <div class="sort">
          <div>排序：</div>
          <div
            class="default"
            :class="query.sortType === 1?'active':''"
            @click="defaultSort"
          >默认</div>
          <div class="price" :class="query.sortType === 2?'active':''" @click="priceSort">
            价格
            <div class="arr">
              <div class="up" :class="query.type == 1?'low':''"></div>
              <div class="down" :class="query.type == 2?'high':''"></div>
            </div>
          </div>
          <div class="sales" :class="query.sortType === 3 ?'active':''" @click="salesSort">
            销量
            <div class="arr">
              <div
                class="up"
                :class="query.sortType === 3 && query.volume === 1 ? 'low' : ''"
              ></div>
              <div class="down" :class="query.sortType === 3 && query.volume === 2 ?'high':''"></div>
            </div>
          </div>
          <div
            class="priceBox"
            v-if="query.searchVal === '宝贝'"
          >
            <div class="min">
              ¥<input
                v-model="query.minMoney"
                maxlength="9" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
            </div>
            <div style="margin: 0 8px">-</div>
            <div class="max">
              ¥<input
                v-model="query.maxMoney"
                maxlength="9"
                oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
            </div>
            <div class="btn" @click="priceSearch">确定</div>
            <div class="clear" @click="clearMoney">清空</div>
          </div>
        </div>
      </div>
      <div class="result">
        <div
          class="pro"
          v-if="query.searchVal === '宝贝' && !setting.product && !setting.network"
          v-loading="setting.listLoading"
        >
          <ProductList
            :productList="productList"
          />
        </div>
        <div
          class="empty"
          v-if="query.searchVal === '宝贝'
            && setting.product
            && !setting.network"
        >
          <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="no-result" />
          <p class="fs20 font-color-999">搜索不到你要找的宝贝呢换个词试试吧～</p>
        </div>
        <div
          class="store"
          v-if="query.searchVal === '店铺' && !setting.store && !setting.network"
          v-loading="setting.listLoading"
        >
          <div
            class="storeBox"
            v-for="(item, index) in storeList"
            :key="index"
          >
            <div class="top">
              <img
                class="storeImg"
                :src="item.shopLogo"
                alt=""
              />
              <div class="storeDesc">
                <p class="storeName">{{ item.shopName }}</p>
                <p class="storeSite">
                  <span>所在地：</span>{{ item.shopAdress }}
                </p>
              </div>
              <div class="enter" @click="toStore(item.shopId)">进入店铺>></div>
            </div>
            <div class="content" v-if="item.skus.length">
              <div
                class="productBox"
                v-for="(items,indexs) in item.skus"
                :key="indexs"
                @click="toProductDetail(item.shopId,items)"
              >
                <img :src="items.image" alt="" />
                <p class="productName">{{ items.productName }}</p>
                <p class="price">¥{{ items.price }}</p>
              </div>
            </div>
          </div>
        </div>
        <div
          class="empty"
          v-if="query.searchVal === '店铺'
            && !storeList.length
            && setting.store
            && !setting.network"
        >
          <svg-icon style="width: 240px; height: 240px; margin-bottom: 20px;" name="no-result" />
          <p class="fs20 font-color-999">搜索不到你要找的店铺呢换个词试试吧～</p>
        </div>
        <div class="network" v-if="setting.network">
          <svg-icon
            style="width: 240px; height: 240px; margin-bottom: 20px;"
            name="net-error"
          />
          <p class="fs20 font-color-999">哎呀，网络开小差了～</p>
        </div>
        <el-pagination
          :hide-on-single-page="true"
          :current-page="page.page"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="handleCurrentChange"
          background layout="prev, pager, next"
          style="justify-content: flex-end;"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineComponent, onBeforeMount, reactive, watch, ref, toRefs } from 'vue'
import { useShop } from '@/store/shop'
import { useRouter } from 'vue-router'

import ProductList from '@/components/base/productList'
import SvgIcon from '@/components/svgIcon/index.vue'

import {
  getSearchProduct
} from '@/api/product.js'
import {
  searchShop
} from '@/api/shop.js'

defineComponent({
  name: 'SearchIndex'
})
const shopStore = useShop()
const { searchObj } = toRefs(shopStore)
const router = useRouter()
const page = reactive({
  page: 1,
  pageSize: 12,
  total: 0,
})
const query = reactive({
  keyword: '',
  searchVal: '',
  sortType: 1,
  maxMoney: '',
  minMoney: '',
  type: '',
  volume: '',
})
const setting = reactive({
  network: false,
  product: false,
  store: false,
  listLoading: false,
})
const productList = ref([]);
const storeList = ref([]);

function getSearchInfo () {
  if (searchObj.value.keyword !== undefined) {
    query.keyword = searchObj.value.keyword
    query.searchVal = searchObj.value.searchVal
    query.maxMoney = ''
    query.minMoney = ''
    if (query.searchVal === '宝贝') {
      getSearchProducts()
    } else {
      getShops()
    }
  }
}
// 获取搜索商品数据
function getSearchProducts () {
  setting.listLoading = true
  getSearchProduct({
    search: query.keyword,
    type: query.type,
    maxMoney: query.maxMoney,
    minMoney: query.minMoney,
    volume: query.volume,
    page: page.page,
    pageSize: page.pageSize
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      productList.value = res.data && res.data.list || []
      page.total = parseInt(res.data.total)
      setting.product = res.data.total ? false : true
      setting.network = false
    }else {
      setting.network = true
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => setting.listLoading = false)
}
// 获取搜索店铺数据
function getShops () {
  setting.loading = true
  searchShop({
    search: query.keyword,
    type: query.type,
    volume: query.volume,
    page: page.page,
    pageSize: page.pageSize
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      storeList.value = res.data && res.data.list || []
      page.total = parseInt(res.data.total)
      setting.store = res.data.total ? false : true
      setting.network = false
    }else {
      setting.network = true
    }
  }).catch(err => ElMessage.err(err.message))
    .finally(() => setting.listLoading = false)
}
// 价格搜索
function priceSearch () {
  page.page = 1
  getSearchProducts()
}
function handleCurrentChange (val) {
  page.page = val
  commonSearch()
}
/**
 * 查询
 * @description query.searchVal 判断类型
 */
function commonSearch () {
  if (query.searchVal === '宝贝') {
    getSearchProducts()
  } else {
    getShops()
  }
}
// 清空价格搜索
function clearMoney () {
  query.minMoney = ''
  query.maxMoney = ''
}
// 默认排序
function defaultSort () {
  page.page = 1
  query.type = ''
  query.volume = ''
  query.sortType = 1
  query.maxMoney = ''
  query.minMoney = ''
  commonSearch();
}
// 价格排序
function priceSort () {
  page.page = 1
  query.type = query.type !== 1 ? 1 : 2
  query.sortType = 2
  query.volume = ''
  query.maxMoney = ''
  query.minMoney = ''
  commonSearch();
}
// 销量排序
function salesSort () {
  page.page = 1
  query.volume = query.volume !== 1 ? 1 : 2
  query.sortType = 3
  query.type = ''
  query.maxMoney = ''
  query.minMoney = ''
  commonSearch();
}

// 跳转商品详情
function toProductDetail (id, item) {
  router.push({
    path: '/productDetail',
    query: {
      proData: JSON.stringify({
        shopId: id,
        productId: item.productId,
        skuId: item.skuId
      })
    }
  })
}
// 跳转到店铺
function toStore (id) {
  router.push({
    path: '/store',
    query: {
      shopId: id
    }
  })
}

watch(
  () => searchObj.value,
  (_nVal) => {
    page.page = 1
    getSearchInfo()
  },
  {
    deep: true
  }
)
onBeforeMount(() => {
  getSearchInfo()
})
</script>
<style lang='scss' scoped>
$searchRed: #C83732;
.search {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-bottom: 143px;
  text-align: center;
  .banxin {
    width: 1252px;
    height: 100%;
    margin: 0 auto;
    .head {
      display: flex;
      justify-content: space-between;
      .bread{
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        display: flex;
        align-items: center;
        .all {
          margin-right: 20px;
        }
        .keyword {
          margin: 0 20px;
          color: $searchRed;
        }
      }
      .sort {
        min-width: 600px;
        height: 63px;
        line-height: 27px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-bottom: 1px solid #f1f1f1;
        color: #666666;
        .default {
          margin-left: 20px;
          cursor: pointer;
        }
        .sales {
          display: flex;
          margin-right: 20px;
          cursor: pointer;
          img{
            width: 9px;
            height: 16px;
            vertical-align: middle;
          }
        }
        .price {
          display: flex;
          margin: 0 20px;
          cursor: pointer;
        }
        .arr {
          vertical-align: middle;
          width: 12px;
          margin-left: 3px;
          .up {
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-bottom-color: #999999;
          }
          .down {
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-top-color: #999999;
            margin-top: 3px;
          }
        }
        .active{
            display: flex;
            cursor: pointer;
            color: $searchRed;
            .arr{
              .high{
                border-top-color: $searchRed;
              }
              .low{
                border-bottom-color: $searchRed;
              }
            }
          }
          .priceBox{
            display: flex;
            .min,
            .max {
              display: flex;
              width: 100px;
              height: 28px;
              padding: 0 5px;
              background-color: #FFF;
              border: 1px solid #ccc;
              box-sizing: border-box;
              input {
                width: 70px;
                padding-left: 3px;
                flex: 1;
                outline: none;
                border: none;
              }
            }
            .btn {
              width: 70px;
              height: 30px;
              margin: 0 20px;
              color: $mainGlod;
              background: #333333;
              border: 1px solid $mainGlod;
              box-sizing: border-box;
              cursor: pointer;
            }
            .clear {
              width: 70px;
              height: 30px;
              cursor: pointer;
              color: #999999;
              border: 1px solid #999999;
            }
          }
      }
    }
    .result {
      width: 100%;
      background-color: #ffffff;
      // padding: 0 45px 30px;
      box-sizing: border-box;
      margin-bottom: 30px;
      .empty,.network{
        width: 100%;
        text-align: center;
        padding: 100px 0;
      }
      .store {
        width: 100%;
        box-sizing: border-box;
        min-height: 400px;
        padding: 20px;
        .storeBox {
          width: 100%;
          margin-bottom: 50px;
          border: 1px solid #F3F4F5;
          &:hover{
            box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.05);
          }
          .top {
            display: flex;
            align-items: center;
            height: 80px;
            border-bottom: 1px solid #F3F4F5;
            .storeImg {
              width: 50px;
              height: 50px;
              margin: 15px;
            }
            .storeDesc {
              flex: 1;
              text-align: left;
              .storeName {
                font-size: 20px;
                margin-bottom: 10px;
              }
              .storeSite {
                font-size: 14px;
                span{
                  color: #999;
                }
              }
            }
            .enter {
              color: $mainGlod;
              cursor: pointer;
              margin-right: 30px;
            }
          }
          .content {
            display: flex;
            width: 100%;
            overflow-y: auto;
            padding: 15px;
            box-sizing: border-box;
            .productBox {
              cursor: pointer;
              width: 190px;
              padding: 10px 15px;
              margin-right: 20px;
              box-sizing: border-box;
              background-color: #ffffff;
              &:hover{
                border: 1px solid #efefef;
              }
              img {
                width: 160px;
                height: 160px;
                border: 1px dashed #333;
              }
              .productName {
                font-size: 12px;
                font-weight: bold;
                margin: 13px 0;
              }
              .price {
                font-size: 16px;
                color: $searchRed;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
    .guessYouLike {
      width: 100%;
      padding: 30px 45px;
      background-color: #ffffff;
      box-sizing: border-box;
      .title {
        text-align: left;
        font-size: 26px;
        margin-bottom: 22px;
      }
    }
  }
}
:deep(.el-pagination){
  padding: 20px;
  text-align: right;
  .el-pager{
    li:not(.disabled):hover{
      color: $mainGlod;
    }
    li:not(.disabled).active{
      background-color: $mainGlod;
    }
    li:not(.disabled).active:hover{
      color: #F4F4F5;
    }
  }
}
.mySwiperLbtn{
  width: 32px;
  height: 32px;
  background-image: url('../../../static/image/zuoa@2x.png');
  background-size: cover;
  left: 0;
}
.mySwiperRbtn{
  width: 32px;
  height: 32px;
  background-image: url('../../../static/image/youa@2x.png');
  background-size: cover;
  right: 0;
}
.pro{
  min-height: 400px;
}
</style>
